<template>
       <div id="header">
             <div class="left">
                 <span class="iconfont">&#xe624;</span>
             </div>
             <div class="center_put">
               <span class="iconfont">&#xe632;</span>
               <input type="text" placeholder="请输入城市/景点/游玩主题">
             </div>
            <router-link to="/city">
                <div class="right">
                  {{this.$store.state.city}}
                  <span class="iconfont">&#xe6aa;</span>
                </div>
            </router-link>
       </div>
</template>

<script>
    export default {
        name: "Header",
        props:{//在子组件中接受参数
        //   city:String // 接受参数验证
        }
    }
</script>
<style lang="stylus" scoped>
    #header{
      width: 100%
      height:.44rem;
      background :#00bcd4;
      display flex
      align-items center
      .left {
        font-size .2rem;
        color:white;
        padding-left:.1rem;
        margin-right:.1rem;
      }
      .center_put{
            flex:1;
            width: 100%
            height:.3rem;
            line-height .28rem;
            border-radius 5px;
            background white
            padding-left:.05rem
            color:#cacaca;
            input{
              width: 85%;
              /*color:#cacaca;*/
            }
          span{
              display inline-block;
              vertical-align middle;
              line-height :.3rem;
          }
      }
      .right{
         color:white;
         padding-right:.1rem;
        margin-left :.1rem;
      }
    }
</style>
